<!doctype html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>会员登录</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
		<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
		<script src="js/bootstrap.min.js" type="text/javascript"></script>
		<!-- 引入自定义css文件 style.css -->
		<link rel="stylesheet" href="css/style.css" type="text/css" />

		<style>
			body {
				margin-top: 20px;
				margin: 0 auto;
			}
			
			.carousel-inner .item img {
				width: 100%;
				height: 300px;
			}
		</style>
	</head>

	<body>
		<div id="header">

		</div>
		<div id="orderList">

			<div class="container">
				<div class="row">
					<div class="btn-group">
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">order个数:<span v-html='pagesize'></span><span class="caret"></span></button>
						<ul class="dropdown-menu">
							<li>
								<a href="javascript:void(0)" @click="changepagesize(event)">1</a>
							</li>
							<li>
								<a href="javascript:void(0)" @click="changepagesize(event)">2</a>
							</li>
							<li>
								<a href="javascript:void(0)" @click="changepagesize(event)">3</a>
							</li>
							<li role="separator" class="divider"></li>
							<li>
								<a href="javascript:void(0)" @click="changepagesize2(event)">自定义:<input type="text" id="pagesizeDefined" /></a>
							</li>
						</ul>
					</div>
					<div class="btn-group">
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  						时间<span v-html='timeASC'></span><span class="caret"></span>
  						</button>
						<ul class="dropdown-menu">
							<li>
								<a href="javascript:void(0)" @click="changeTimeASC">逆序</a>
							</li>
							<li>
								<a href="javascript:void(0)" @click="changeTimeASC">正序</a>
							</li>

						</ul>
					</div>
					<div style="margin:0 auto; margin-top:10px;width:950px;">
						<strong>我的订单</strong>
						<table class="table table-bordered">
							<tbody v-for="order in page.list ">
								<tr class="success">
									<th colspan="5">订单编号:{{order.oid}}<span style="float: right;">日期:{{formatdate(order.ordertime)}}</span> </th>
								</tr>
								<tr class="warning">
									<th>图片</th>
									<th>商品</th>
									<th>价格</th>
									<th>数量</th>
									<th>小计</th>
								</tr>

								<tr v-for="oi  in order.orderItemList  " class="active">
									<td width="60" width="40%">
										<input type="hidden" name="id" value="22">
										<img :src="path+oi.product.pimage" width="70" height="60">
									</td>
									<td width="30%">
										<a target="_blank">{{oi.product.pname}}</a>
									</td>
									<td width="20%">
										￥${{oi.product.shopPrice}}
									</td>
									<td width="10%">
										{{oi.count}}
									</td>
									<td width="15%">
										<span class="subtotal">￥{{oi.subtotal}}</span>
									</td>
								</tr>

							</tbody>

						</table>
					</div>
				</div>

				<!--分页 -->

				<!--分页 -->
				<div style="width:380px;margin:0 auto;margin-top:50px;">
					<ul class="pagination" style="text-align:center; margin-top:10px;">
						<li v-bind:class="{'disabled': currPage==1}">
							<a v-bind:href="'order_list.htm?pageNum='+(currPage-1)+'&pagesize='+pagesize+'&timeASC='+timeboolean" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
						</li>
						<li v-for="n in totalPage" v-bind:class="{'active': currPage == n}">
							<a v-bind:href="'order_list.htm?pageNum='+n+'&pagesize='+pagesize+'&timeASC='+timeboolean">{{n}}</a>
						</li>
						<li v-bind:class="{'disabled': currPage==totalPage}">
							<a :href="'order_list.htm?pageNum='+(currPage+1)+'&pagesize='+pagesize+'&timeASC='+timeboolean" aria-label="Next">
								<span aria-hidden="true">&raquo;</span>
							</a>
						</li>
					</ul>
				</div>
				<!-- 分页结束=======================        -->
			</div>
		</div>
		<div style="margin-top:50px;">
			<img src="./image/footer.jpg" width="100%" height="78" alt="我们的优势" title="我们的优势" />
		</div>

		<div style="text-align: center;margin-top: 5px;">
			<ul class="list-inline">
				<li>
					<a>关于我们</a>
				</li>
				<li>
					<a>联系我们</a>
				</li>
				<li>
					<a>招贤纳士</a>
				</li>
				<li>
					<a>法律声明</a>
				</li>
				<li>
					<a>友情链接</a>
				</li>
				<li>
					<a target="_blank">支付方式</a>
				</li>
				<li>
					<a target="_blank">配送方式</a>
				</li>
				<li>
					<a>服务声明</a>
				</li>
				<li>
					<a>广告声明</a>
				</li>
			</ul>
		</div>
		<div style="text-align: center;margin-top: 5px;margin-bottom:20px;">
			Copyright &copy; 2005-2016 天虎商城 版权所有
		</div>
	</body>

	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript" src="js/axios.min.js"></script>
	<script type="text/javascript" src="js/header.js"></script>
	<script type="text/javascript" src="js/datatime.js"></script>
	<script>
		var pagesize = parseInt($.getUrlParam('pagesize'));
		if(pagesize == undefined || pagesize == null) {
			pagesize = 1;
		}

		var timeASC2 = $.getUrlParam('timeASC');
		if(timeASC2 == undefined || timeASC2 == null) {
			timeASC2 = false;
		}
		
		var word = "";
		if(timeASC2!='false') {
			word = "正序";
		} else {
			word = "逆序";
		}
		
		var pageNum = parseInt($.getUrlParam('pageNum'));
		var orderList = new Vue({
			el: "#orderList",

			data: {
				page: {},
				orderlist: null,
				currPage: pageNum,
				totalPage: null,
				pagesize: pagesize,
				timeASC: word,
				timeboolean: timeASC2,
			},
			methods: {
				//转换日期格式
				formatdate: function(val) {
					var val2 = UnixToDate(Number(val), 1); //1-12有不同种格式
					return val2;
				},
				changepagesize: function(event) {
					event = event ? event : window.event;
					var obj = event.srcElement ? event.srcElement : event.target;
					//这时obj就是触发事件的对象，可以使用它的各个属性 
					//还可以将obj转换成jquery对象，方便选用其他元素 
					var $obj = $(obj);
					this.pagesize = $obj.text();
				},
				changepagesize2: function(event) {
					event = event ? event : window.event;
					var obj = event.srcElement ? event.srcElement : event.target;
					//这时obj就是触发事件的对象，可以使用它的各个属性 
					//还可以将obj转换成jquery对象，方便选用其他元素 
					var $obj = $(obj);

					this.pagesize = $("#pagesizeDefined").val();
				},
				changeTimeASC: function() {
					this.timeboolean = !this.timeboolean;
					if(this.timeboolean) {
						this.timeASC = "正序";
					} else {
						this.timeASC = "逆序";
					}

				},
				updatePage: function() {
					var data = {
						'currPage': this.currPage,
						asc: this.timeboolean,
						pagesize: this.pagesize,
					}
					console.log(data);
					axios({
						url: "/ShopManagement/order/getMyOrderList",
						method: "get",
						params: data,
					}).then(function(response) {
						if(response.data.state == 0) {
							//弹出一个询问框，有确定和取消按钮				
							//利用对话框返回的值 （true 或者 false）
							if(confirm("您必须先去登陆了来")) {
								window.location.href = "login.htm";
							} else {
								alert("点击了取消");
							}

						} else if(response.data.state == 1) {

							orderList.page = response.data.page;
							orderList.totalPage = orderList.page.totalPage;
						} else {
							alert("系统异常");
						}
					}).catch(function(reason) {
						console.log("请求失败");
					});
				}

			},
			mounted: function() {
				this.updatePage();
			},
			computed: {

			},
			watch: {
				timeboolean(newVal, oldVal) {
					this.updatePage();
				},
				pagesize(newVal, oldVal) {
					this.updatePage();

				}

			},
		});
	</script>

</html>